<template>
	<gracePage :customHeader="false">
<!-- 		<view slot="gHeader" style="margin-top: 20rpx;">
			<view class="grace-header-body">
				<text class="grace-header-icons grace-icons icon-scancode grace-white"></text>
				<view class="grace-header-content">
					<view style="width:100%;">
						<graceSearch placeholder="搜索你想要的宝贝"></graceSearch>
					</view>
				</view>
				<text class="grace-header-icons grace-icons icon-user grace-white"></text>
			</view>
			<view class="grace-bg-red">
			    <graceNavBar :items="tabs" :currentIndex="currentIndex" :size="160" activeDirection="center" textAlign="center" activeLineWidth="120rpx" padding="0rpx" :isCenter="true" activeLineBg="#ff0000" activeColor="#ff0000" @change="navChange" background-color="#FFFFFF"></graceNavBar>
			</view>
		</view> -->
		<view slot="gBody" id="gBody">
			<!-- <view style="margin-top: -10rpx;background-color: #FF0000;">
			<view class="grace-margin-top">
			    <graceNavBar :items="tabs" :currentIndex="currentIndex" :size="160" activeDirection="center" textAlign="center" activeLineWidth="120rpx" padding="0rpx" :isCenter="true" activeLineBg="#ff0000" activeColor="#ff0000" @change="navChange" background-color="#FFFFFF"></graceNavBar>
			</view>
			</view> -->
			<view class="grace-margin-top grace-bg-red" style="margin-top: 0rpx;">
				<view class="grace-header-body">
					<text class="grace-header-icons grace-icons icon-scancode grace-white"></text>
					<view class="grace-header-content">
						<view style="width:100%;">
							<graceSearch placeholder="搜索你想要的宝贝"></graceSearch>
						</view>
					</view>
					<text class="grace-header-icons grace-icons icon-weixin grace-white"></text>
				</view>
				<view>
				    <graceNavBar :items="tabs" :currentIndex="currentIndex" :size="160" activeDirection="center" textAlign="center" activeLineWidth="120rpx" padding="0rpx" :isCenter="true" activeLineBg="#55aaff" activeColor="#55aaff" @change="navChange" color="#FFFFFF" background-color="#FFFFFF"></graceNavBar>
				</view>
			</view>
			<swiper :style="{height:mainHeight+'px'}" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
					<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scrolltolower="scrollend" @scroll="scroll"
					 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
						<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
						<graceEmpty v-if="news == 'empty'">
							<view slot="img" class="empty-view">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
							</view>
							<text slot="text" class="grace-text-small grace-gray">本栏目暂无商品</text>
						</graceEmpty>
						<view class="grace-body">							
							<view class="grace-img-card">
								<view class="grace-img-card-item" :data-productid="index" v-for="(item, index) in news" :key="index" @tap="openProductInfo(item)">
									<view class="grace-img-card-img">
										<image :src="item.images_url[0]" mode="widthFix" class="grace-img-card-img"></image>
									</view>
									<text class="grace-img-card-title grace-ellipsis">{{item.name}}</text>
									<view>
										<text class="grace-img-card-price">￥{{item.price}}</text>
										<text class="grace-line-through grace-text-small grace-gray">￥{{item.origin_price}}</text>
									</view>
								</view>
							</view>							
					    </view>
						
						<graceLoading :loadingType="loadingTypes[newsIndex]"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceNavBar from "../../graceUI/components/graceNavBar.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceReload from '../../graceUI/components/graceReload.vue';
	import graceSearch from "../../graceUI/components/graceSearch.vue";
	var vsrc = "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400";
	export default {
		data() {
			return {
				currentIndex: 0,
				mainHeight: 600,
				//分类数据
				tabsAll: [],
				tabs: [],
				// 新闻信息保存数组
				newsAll: [],
				// 每个选项卡对应的分页
				pages: [],
				// 加载状态
				loadingTypes: [],
				// 每个滚动区域的滚动值
				scrollTops: []
			}
		},
		onReady: function() {
			setTimeout(() => {
				uni.createSelectorQuery().select('#gBody').fields({
					size: true
				}, (res) => {
					this.mainHeight = res.height;
				}).exec();
			}, 1000);
			//加载分类信息 初始化数据
			this.getCate();
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.loadingTypes[this.currentIndex] != 2 || this.loadingTypes[this.currentIndex] != 4) {
					this.getNews();
				}
			}
		},
		methods: {
			navChange: function(e) {
				this.currentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.currentIndex = index;
			},
			//加载分类信息 初始化数据
			async getCate() {
				let data = await this.$apis.listProductCate();
				this.tabsAll = data;
				console.log( this.tabsAll);
				for (var i = 0; i < this.tabsAll.length; i++) {
					this.newsAll.push([]);
					this.tabs.push(this.tabsAll[i].name);
					this.pages.push(1);
					this.loadingTypes.push(3);
					this.scrollTops.push(0);
				}
				this.getNews();
				
			},
			// 猜你喜欢
			youlike : function(){
				this.gRequest.get(
					'http://grace.hcoder.net/api/products/youlike',{},
					(res) => { this.setData({youlikes : res.data}); }
				);
			},
			// 打开商品详情
			openProductInfo : function(e){
				console.log(e);
				this.$mRouter.push({
					route: this.$mRoutesConfig.productDetail,
					query:{id:e.id}
				})
			},
			// 加载新闻
			// 加载新闻
			async getNews(isReload) {
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 id 应该为 this.tabsAll[this.currentIndex].id
				//console.log('类型 : ' + this.tabs[this.currentIndex] + ' 第'+ this.pages[this.currentIndex] +'页');
				if (!isReload) {
					this.loadingTypes.splice(this.currentIndex, 1, 1);
				}
				let cateid = this.tabsAll[this.currentIndex].id;
				let page   = this.pages[this.currentIndex];
				let data = await this.$apis.paginateProduct({category_id:cateid,page:page});
				let list = data.data;
				if ( list.length > 0 ) {
					// 第一页
					if (this.pages[this.currentIndex] == 1) {
						this.newsAll.splice(this.currentIndex, 1, list);
					}
					// 之后的加载页
					else {
						this.newsAll[this.currentIndex] = this.newsAll[this.currentIndex].concat(list);
					}
					// 页码增加
					this.pages[this.currentIndex]++;
					setTimeout(() => {
						this.loadingTypes.splice(this.currentIndex, 1, 3);
					}, 300)
				} else if ( this.newsAll.length == 0 ) {
					console.log('empty');
					this.newsAll[this.currentIndex] = 'empty';
					this.loadingTypes.splice(this.currentIndex, 1, 4);
				} else {
					console.log('nomore');
					this.loadingTypes.splice(this.currentIndex, 1, 2);
				}
				if (isReload) {
					setTimeout(() => {
						this.$refs.graceReload[this.currentIndex].endReload();
					}, 300)
				}
			},
			// 点击新闻列表
			newsinfo: function() {
				uni.navigateTo({
					url: '../artInfo/artInfo'
				})
			},
			// 加载更多
			scrollend: function(e) {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes[this.currentIndex] == 2 || this.loadingTypes[this.currentIndex] == 4) {
					return false;
				}
				console.log('loadmore.....');
				this.getNews();
			},
			scroll: function(e) {
				this.scrollTops[this.currentIndex] = e.detail.scrollTop;
			},
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchmove(touchObj);
			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.loadingTypes.splice(this.currentIndex, 1, 3);
				this.getNews(1);
			}
		},
		components: {
			gracePage,
			graceNavBar,
			graceEmpty,
			graceLoading,
			graceReload,
			graceSearch
		}
	}
</script>
<style>
	.grace-news-img {
		width: 220rpx;
		height: 150rpx;
		overflow: hidden;
		font-size: 0;
	}

	.grace-news-img-in {
		width: 100%;
	}

	.grace-news-imgs-img {
		width: 225rpx;
		height: 380rpx;
	}

	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #F6F7F8;
		margin-top: 300rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-text-small {
		margin-top: 10px;
	}
	/* 九宫格个性修饰 */
	.grace-grids-items{width:20%; padding:25rpx 0; box-sizing:border-box;}
	.grace-grids-image{width:80rpx; height:80rpx;}
	/* 产品列表修饰 */
	.grace-img-card-img{height:340rpx;}
	.grace-img-card-price{margin-right:20rpx;}
</style>